@extends('layouts')

@section('content')

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>用户查询</legend>
    </fieldset>

    <div class="my-btn-box">
        <span class="fr">
            <span class="layui-form-label">用户ID：</span>
            <div class="layui-input-inline">
                <input type="text" name="uid" value="@php echo !empty($uid) ? $uid :'' @endphp" autocomplete="off" placeholder="请输入用户ID" class="layui-input" style="width:250px">
            </div>
            <button class="layui-btn mgl-20 search">查询</button>
        </span>
    </div>

    <table class="layui-table">
        <thead>
            <tr>
                <th>序号</th>
                <th>日期</th>
                <th>代理ID</th>
                <th>数量</th>
                <th>月总额</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($gamers as $key => $gamer)
            <tr>
                <td>{{ $key+1 }}</td>
                <td>{{ $gamer->post_time }}</td>
                <td>{{ $gamer->uid }}</td>
                <td>{{ $gamer->quantity_sum }}</td>
                <td>{{ $gamer->month_total }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>

    <div id="page">{{ $gamers->links() }}</div>

@endsection

@section('my-js')
<script type="text/javascript">
    layui.use(['form','laypage'], function(){
        var form = layui.form, laypage = layui.laypage;

        $('.search').on('click', function() {
            var uid = $('input[name=uid]').val();
            var data = {uid : uid};

            ajaxRequest(data);

        });

        function ajaxRequest(data) {
            $.get('{{ route('proxy.search') }}',data, function(data) {
                console.log(data.gamers);
                var gamers = data.gamers.data;
                $('#page').html(data.page);
                var html = '';
                $.each(gamers, function(i,val) {
                    var k = i+1;
                    html += '<tr><td>'+k+'</td><td>'+val.post_time+'</td><td>'+val.uid+'</td><td>'+val.quantity_sum+'</td><td>'+val.month_total+'</td></tr>';
                });

                $('.layui-table tbody').html(html);

            }, 'json');
        }

        // $('#page a').on('click', function(event) {
        //     event.preventDefault();
        //     alert();

        //     var uid = $('input[name=uid]').val();
        //     var data = {uid : uid};

        //     ajaxRequest(data);
        // });

        form.on('submit(sub)', function(data){
            var url = $(this).attr('data-url');
            commonAjaxSubmit(url, 'GET');

        })
    });
</script>
@endsection
